import * as constants from '@/config/constants';
import store from './store';

export default class Pen {
  public canvas: any;
  public context: any;
  public codePoint: any;
  public lastPoint: any;
  public bookMapData: any;
  public currentBookPageId: number;
  public currentRegion: any;
  constructor(canvas) {
    this.canvas = canvas;
    this.context = this.canvas.getContext('2d');
    this.canvas.width = 280;
    this.canvas.height = 280;
    this.context.fillStyle = 'rgba(0,0,0,0.5)';
    this.context.lineWidth = 1;
    // this.context.beginPath();
    // this.context.moveTo(204.35648, 1);
    // this.context.lineTo(202.32112, 200);
    // this.context.stroke();
    // 码点信息
    this.codePoint = this.getCodePoint();
    this.lastPoint = null;
    this.currentBookPageId = 0;
    this.currentRegion = {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
      width: 96,
      height: 96,
    };
  }
  // 设置Book信息
  setBook(data): any {
    const mapData = {};
    data.forEach((item) => {
      mapData[item.textBookPageId] = item;
    });
    this.bookMapData = mapData;
  }
  // 获取码点信息
  getCodePoint(codePoint = 0x33) {
    const type = new Map([
      [0x00, 12],
      [0x01, 12],
      [0x02, 12],
      [0x03, 12],
      [0x12, 12],
      [0x13, 12],
      [0x23, 16],
      [0x33, 16],
    ]).get(codePoint);
    // 码点间距
    const distance = new Map([
      [12, { x: 1.524, y: 1.524 }],
      [16, { x: 2.031, y: 2.031 }],
    ]).get(type);
    return {
      type: codePoint,
      ...distance,
    };
  }
  // 精确到小数点后5位
  static round(number) {
    return Math.round(number * Math.pow(10, 3)) / Math.pow(10, 3);
  }
  // 获取x坐标
  // getX(x) {
  //   console.log(x * this.codePoint.x, this.currentRegion.left)
  //   return Pen.round((this.canvas.width * x * this.codePoint.x) / (this.currentRegion.bookWidth * 25.4 / 300));
  // }
  // // 获取y坐标
  // getY(y) {
  //   return Pen.round((this.canvas.height * y * this.codePoint.y) / (this.currentRegion.bookHeight * 25.4 / 300));
  // }
  // 获取x坐标
  getX(x) {
    return (x * this.codePoint.x - this.currentRegion.left) *
      (this.canvas.width / this.currentRegion.width);
  }
  // 获取y坐标
  getY(y) {
    return (y * this.codePoint.y - this.currentRegion.top) *
      (this.canvas.height / this.currentRegion.height);
  }
  // 获取x坐标
  getPageX(x) {
    return Pen.round(x / this.codePoint.x);
  }
  // 获取y坐标
  getPageY(y) {
    return Pen.round(y / this.codePoint.y);
  }
  // 设置线条宽度
  setPenWidth(width) {
    this.context.lineWidth = width;
  }
  // 设置颜色
  setPenColor(color) {
    this.context.strokeStyle = color;
  }
  // 绘制
  draw(point) {
    // // 点在教材页上的定位
    point.ab_x = point.x + point.fx / 100;
    point.ab_y = point.y + point.fy / 100;
    if (point.type !== constants.PEN_DOWN && this.lastPoint === null) {
      this.lastPoint = point;
    }
    switch (point.type) {
      case constants.PEN_DOWN:
        this.lastPoint = point;
        break;
      case constants.PEN_MOVE:
      case constants.PEN_UP:
        this.drawLine(point);
        this.lastPoint = point;
        break;
      default:
        break;
    }
  }
  // 画线
  drawLine(point) {
    this.context.beginPath();
    this.context.moveTo(this.getX(this.lastPoint.ab_x), this.getY(this.lastPoint.ab_y));
    this.context.lineTo(this.getX(point.ab_x), this.getY(point.ab_y));
    this.context.stroke();
  }
  getGridImage() {
    return this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
  }
  clearRegion(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
  // 绘制位图
  drawImage(imageBitmap) {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.context.drawImage(
      imageBitmap,
      0,
      0,
      imageBitmap.width,
      imageBitmap.height,
      0,
      0,
      this.canvas.width,
      this.canvas.height
    );
  }
  // 绘制背景图
  drawBackground() {
    // 页码奇偶性 奇数页下标0 偶数页下标1
    const pageParity = Number(!(this.pageId % 2));
    const bookBackground = store.background.get(
      store.background.has(this.book.id) ? this.book.id : 100
    )[pageParity];
    this.drawImage(bookBackground);
  }
}
